<script setup>
import {ElMessage} from "element-plus"
import MetaCode from "@/components/MetaCode.vue"
import Meta3Part from "@/components/Meta3Part.vue"
import MetaIcon from "@/components/MetaIcon.vue"

import {useClipboard, useDark, useToggle} from "@vueuse/core"
import {compressJson, defaultData, defaultRender, formatJson} from '@/utils/data.js'

// 数据
const data = reactive(defaultData)
const func = computed(() => data.funcOptions.filter(f => f.name == data.funcName)[0])
const result = computed(() => {
  try {
    return defaultRender(func.value.name, func.value.code, JSON.parse(data.json), func.value.extCode)
  } catch (e) {
    return `json数据解析错误，${e}`
  }
})
const resultLanguage = computed(() => data.funcName === 'Art模板' && data.tmpl ? data.tmpl.lang : 'javascript')

// 弹框
const dialog = reactive({
  extCode: false,
  fullscreen: false
})
const extCodeDialogRef = useTemplateRef('extCodeDialog')
function extCodeEdit() {
  dialog.extCode = true
  extCodeDialogRef.value.open()
}
function clickFullScreen() {
  dialog.fullscreen = !dialog.fullscreen
}


// 模板变更时将其复制进去
function tmplChange(tmpl) {
  if (tmpl) {
    func.value.code = tmpl.code
  }
}

// 主题切换
const isDark = useDark()
const toggleDark = useToggle(isDark)

// 复制结果
function copyResult(){
  useClipboard({legacy: true}).copy(result.value)
  ElMessage({message: '复制成功', type: 'success'})
}

// 复制压缩后的结果
function compress(){
  nextTick(() => {
    useClipboard({legacy: true}).copy(compressJson(result.value))
    ElMessage({message: '压缩并复制成功', type: 'success'})
  })
}

// utools启动时将json写入
onMounted(() => {
    if (window.utools) {
      window.utools.onPluginEnter(action => {
        data.json = formatJson(action.payload)
      })
    }
  }
)
</script>

<template>
  <meta3-part style="height: 100vh; overflow: hidden">
    <template v-slot:header>
      <meta-code v-model:value="data.json" language="json"/>
      <div class="hint">数据</div>
    </template>

    <template v-slot:main>
      <meta-code v-model:value="func.code" language="javascript"/>
      <div class="tmpl" v-if="data.funcName === 'Art模板'">
        <el-button icon="el-icon-edit" style="margin-bottom: 10px;width: 108px" @click="extCodeEdit">通用函数</el-button>
        <el-select v-model="data.tmpl" value-key="name" style="width: 108px" @change="tmplChange" clearable placeholder="示例模板">
          <el-option v-for="item in data.tmplOptions" :value="item" :label="item.name" :key="item.name">
            <MetaIcon :name="item.name" :icon="item.lang"/>
          </el-option>
          <template #label="{ value }">
            <MetaIcon :name="value.name" :icon="value.lang"/>
          </template>
        </el-select>
      </div>
      <div class="hint">
        <el-segmented v-model="data.funcName" :options="data.funcOptions.map(d => d.name)"></el-segmented>
      </div>
    </template>

    <template v-slot:right>
      <meta-code :value="result" readOnly :language="resultLanguage"/>
      <div class="hint">结果</div>
      <div class="btns">
        <meta-icon class="btn" icon="compress" name="复制压缩结果" @click="compress"     tooltip v-if="data.funcName === 'Js引擎'"/>
        <meta-icon class="btn" icon="copy"     name="复制结果"     @click="copyResult"   tooltip />
        <meta-icon class="btn" icon="theme"    name="切换主题"     @click="toggleDark()" tooltip />
      </div>
    </template>
  </meta3-part>

  <el-dialog ref="extCodeDialog" v-model="dialog.extCode" :fullscreen="dialog.fullscreen"
             draggable align-center>
    <template #header>
      <div style="display: flex; justify-content: space-between">
        <div class="el-dialog__title">编辑通用函数【拼接在自定义模板后面】</div>
        <meta-icon icon="el-icon-fullScreen" @click="clickFullScreen" class="fullscreen"></meta-icon>
      </div>
    </template>

    <div :style="dialog.fullscreen ? {height: 'calc(100vh - 80px)'} : {height: '60vh'}">
      <meta-code v-model:value="func.extCode" language="javascript"/>
    </div>
  </el-dialog>

</template>

<style scoped lang="scss">
.hint {
  position: absolute;
  bottom: 10px;
  right: 10px;

  font-size: 20px;
  color: var(--hint-color);
}

.tmpl {
  position: absolute;
  top: 10px;
  right: 10px;

  display: flex;
  flex-direction: column;
  align-items: end;
}

.btns {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px;
  background-color: var(--btns-backgroud-color);

  display: flex;
  flex-direction: column;
  font-size: 22px;

  color: var(--hint-color);

  .btn {
    cursor: pointer;
    position: relative;
    margin-top: 10px;

    &:hover {
      color: var(--drag-hover-color);
    }
  }
}

.codemirror-opacity {
  opacity: 0.8;
}

.fullscreen {
  margin-top: -10px;
  cursor: pointer;
  color: #909399;

  &:hover {
    color: var(--hint-color);
  }
}
</style>